.vbestui-switch {
  width: 56px;
  height: 28px;
  background: #cccccc;
  border-radius: 28px;
  display: inline-flex !important;
  justify-content: initial !important;
  align-items: center !important;
  color: #fff;
  cursor: pointer;
  position: relative;
}
.vbestui-switch-large {
  width: 72px;
  height: 36px;
}
.vbestui-switch-small {
  width: 40px;
  height: 20px;
}
.vbestui-switch-disabled {
  cursor: no-drop;
  opacity: .7;
}
.vbestui-switch-circle {
  display: inline-block;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(2px);
}
.vbestui-switch-circle-large {
  height: 32px;
  width: 32px;
}
.vbestui-switch-circle-small {
  height: 17px;
  width: 17px;
}
.vbestui-switch-open {
  position: absolute;
  left: 6px;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vbestui-switch-open-small {
  left: 5px;
}
.vbestui-switch-close {
  position: absolute;
  right: 6px;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vbestui-switch-close-small {
  right: 5px;
}
.vbestui-switch-active {
  background: var(--primary);
}
.vbestui-switch-circle-active-default {
  animation: default-active 0.2s;
  -webkit-animation: default-active 0.2s;
  transform: translateX(30px);
}
.vbestui-switch-circle-unactive-default {
  animation: unactive 0.2s;
  -webkit-animation:unactive 0.2s;
}
.vbestui-switch-circle-active-large {
  animation: large-default 0.3s;
  -webkit-animation:large-default 0.3s;
  transform: translateX(38px);
}
.vbestui-switch-circle-unactive-large {
  animation: large-unactive 0.3s;
  -webkit-animation:large-unactive 0.3s;
}
.vbestui-switch-circle-active-small {
  animation: small-default 0.2s;
  -webkit-animation:small-default 0.2s;
  transform: translateX(21px);
}
.vbestui-switch-circle-unactive-small {
  animation: small-unactive 0.2s;
  -webkit-animation:small-unactive 0.2s;
}
@keyframes default-active {
  0% {
    width: 24px;
    transform: translateX(2px);
    -webkit-transform:translateX(2px);
    border-radius: 24px;
  }
  60% {
    width: 32px;
    transform: translateX(2px);
    -webkit-transform:translateX(2px);
  }
  100% {
    width: 24px;
    transform: translateX(30px);
    -webkit-transform: translateX(30px);
  }
}
@keyframes unactive {
  0% {
    width: 24px;
    transform: translateX(30px);
    -webkit-transform:translateX(30px);
    border-radius: 24px;
  }
  60% {
    width: 32px;
    transform: translateX(22px);
    -webkit-transform:translateX(22px);
  }
  100% {
    width: 24px;
    transform: translateX(2px);
    -webkit-transform:translateX(2px);
  }
}
@keyframes large-default {
  0% {
    width: 32px;
    transform: translateX(2px);
    -webkit-transform:translateX(2px);
    border-radius: 24px;
  }
  60% {
    width: 42px;
    transform: translateX(2px);
    -webkit-transform:translateX(2px);
  }
  100% {
    width: 32px;
    transform: translateX(38px);
    -webkit-transform:translateX(38px);
  }
}
@keyframes large-unactive {
  0% {
    width: 32px;
    transform: translateX(38px);
    -webkit-transform:translateX(38px);
    border-radius: 24px;
  }
  60% {
    width: 42px;
    transform: translateX(28px);
    -webkit-transform:translateX(28px);
  }
  100% {
    width: 32px;
    transform: translateX(2px);
    -webkit-transform:translateX(2px);
  }
}
@keyframes small-default {
  0% {
    width: 17px;
    transform: translateX(2px);
    -webkit-transform: translateX(2px);
    border-radius: 24px;
  }
  60% {
    width: 24px;
    transform: translateX(2px);
    -webkit-transform:translateX(2px);
  }
  100% {
    width: 17px;
    transform: translateX(21px);
    -webkit-transform:translateX(21px);
  }
}
@keyframes small-unactive {
  0% {
    width: 17px;
    transform: translateX(21px);
    -webkit-transform:translateX(21px);
    border-radius: 24px;
  }
  60% {
    width: 24px;
    transform: translateX(16px);
    -webkit-transform:translateX(16px);
  }
  100% {
    width: 17px;
    transform: translateX(2px);
    -webkit-transform:translateX(2px);
  }
}